<template>
	<div id="app">
		<div>
			<span>全选:</span>
			<input type="checkbox" v-model="isAllChecked"
			  @click="changeAll"/>
			<button @click="list.forEach(item => item.checked = false)">反选</button>
			<ul>
				<li v-for="(item, index) in list">
					<!-- checked是否存在/true或false可以影响当前选框的勾选状态 -->
					<input type="checkbox" v-model="item.checked"/>
					<span>{{ item.name }}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup>
	// 计算属性
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	const list = reactive([
		{
			name: "猪八戒",
			checked: false,
		},
		{
			name: "孙悟空",
			checked: false,
		},
		{
			name: "唐僧",
			checked: false,
		},
		{
			name: "白龙马",
			checked: false,
		},
	])
	// 根据目标响应式数组动态的计算出另一个数据
	// 计算属性的结果本质也是一个响应式数据
	const isAllChecked = computed(() => {
		// 根据list里面的数据，只要有一个的checked是false，结果就返回false
		let obj = list.find(item => !item.checked)
		if(obj) {
			// 找到了，至少有一个子选框没有勾选上
			return false // 全选框不选中
		} else {
			// 没找，全部子选框都勾选上了
			return true // 全选框也勾选上
		}
	})
	
	const changeAll = () => {
		if(isAllChecked.value) {
			// 现在是全选住了，强制修改为false
			console.log('反选')
			// isAllChecked.value = false // 不能直接修改
			// 间接修改，只需要把数组中的每一项checked都改为false
			// 改被依赖的数据，计算属性自动算
			list.forEach(item => item.checked = false) 
		} else {
			// 现在是非全选，强制修改为true
			console.log('全选')
			// isAllChecked.value = true
			list.forEach(item => item.checked = true) 
		}
	}
</script>

<style scoped>

</style>